<template>
  <div class="userinfo-wp">
    <header class="userinfobar .userinfobar-nav">
      <a
        class="button button-link button-nav pull-left goBack"
        href="javascript:window.history.go(-1);"
        style="z-index:1;"
      >
        <span class="iconfont icon-sort_desc"></span>
      </a>
      <h1 class="title title-white unBorder" style="border-bottom:1px soild #ccc;">个人信息</h1>
    </header>
    <van-notice-bar
      color="#1989fa"
      background="#ecf9ff"
      left-icon="info-o"
      @click="onClickShow"
      text="点击编辑个人信息"
    />
    <van-cell title="昵称" :value="user.name" />
    <van-cell title="账号" :value="user.loginName" />
    <van-cell title="年龄" :value="user.age" />
    <van-cell title="性别" :value="user.gender" />
    <van-cell title="学历" :value="user.edu" />
    <van-cell title="地址" :value="(user.area?user.area.join('-'):'')" />

    <!-- 遮罩层 -->
    <van-overlay v-show="show">
      <div class="wrapper" style="z-index:999;">
        <!-- <div class="block" catch:tap="noop"></div> -->
        <van-cell-group style="width: 90%;height: 90%;">
          <h4 style="text-align: center;">编辑个人信息</h4>
          <van-field label="昵称" v-model="upUser.name" placeholder="请输入用户名" :border="false" />
          <van-field label="年龄" v-model="upUser.age" placeholder="请输入年龄" :border="false" />
          <!-- 性别 -->
          <div class="usergender-wp">
            <span>性别</span>
            <div class="usergender">
              <label>
                <input type="radio" v-model="upUser.gender" value="男" name="gender" id />男
              </label>
              <label>
                <input type="radio" v-model="upUser.gender" value="女" name="gender" id />女
              </label>
            </div>
          </div>
          <div class="usergender-wp" style="height: 0.46rem;">
            <span>学历</span>
            <div style="width: 4rem;">
              <van-dropdown-menu>
                <van-dropdown-item :value="upUser.edu" :options="option" @change="eduChange" />
              </van-dropdown-menu>
            </div>
          </div>
          <div class="usergender-wp" style="height: 0.46rem;">
            <span>地址</span>
            <div style="width: 4rem;z-index:999;">
              <!-- <input type="text" @focus="isArea = true" /> -->
              <div class="areaText" @click="areaShow">{{upUser.area&&upUser.area.join('-')}}</div>
              <van-area v-show="isArea" :area-list="areaList" @confirm="areaFn" @cancel="cancelFn" />
            </div>
          </div>
          <div>
            <van-button type="primary" @click="submitClk">确认</van-button>
            <van-button type="default" @click="onClickHide">取消</van-button>
          </div>
        </van-cell-group>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import "@/css/main.css";
import "@/css/login/userinfo.css";
import "@/css/login/icon/iconfont.css";
import { mapGetters, mapActions } from "vuex";
import areaData from "@/utils/city.data-3";
export default {
  data() {
    return {
      show: false,
      option: [
        { text: "请选择", value: 0 },
        { text: "小学", value: "小学" },
        { text: "初中", value: "初中" },
        { text: "中专", value: "中专" },
        { text: "高中", value: "高中" },
        { text: "大专", value: "大专" },
        { text: "本科", value: "本科" },
        { text: "研究生", value: "研究生" }
      ],
      areaList: {},
      isArea: false,
      upUser: {
        edu: 0
      }
    };
  },
  created() {
    if (typeof this.user == "string") {
      this.user.area = JSON.parse(this.user.area || "[]");
    }
    this.upUser = this.user;
    this.areaList = areaData;
  },
  methods: {
    ...mapActions("login", ["upAccount", "upArea"]),
    onClickShow() {
      this.show = true;
    },
    onClickHide() {
      this.show = false;
    },
    genderChange(e) {
      console.log(e);
    },
    eduChange(e) {
      this.upUser.edu = e;
    },
    areaFn(e) {
      this.isArea = false;
      let arr = [];
      e.map((v, i) => {
        arr.push(v.name);
        if (i == 2) {
          this.upUser.areaCode = v.code;
        }
      });
      this.upUser.area = arr;
    },
    cancelFn() {
      this.isArea = false;
    },
    areaShow() {
      this.isArea = true;
    },
    submitClk() {
      console.log(this.upUser);
      let data = { ...this.upUser };
      data.area = JSON.stringify(data.area || []);
      this.upAccount(data);
      this.upArea(data);
    }
  },
  computed: {
    ...mapGetters(["user"])
  }
};
</script>

<style scoped>
.userinfo-wp >>> header {
  margin-bottom: 0.2rem !important;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 100%;
  height: 100%;
  padding: 0.1rem;
  background-color: #fff;
}

.userinfo-wp >>> .van-field__label {
  width: 0.5rem;
}

.usergender-wp {
  margin: 0.05rem auto;
  /* height: 0.77rem; */
  padding: 10px 16px;
  display: flex;
  align-items: center;
}

.usergender-wp span {
  margin-right: 12px;
  font-size: 0.24rem;
}

.usergender {
  width: 4rem;
  display: flex;
  justify-content: space-around;
}

.userinfo-wp >>> .van-dropdown-item {
  position: absolute;
}

.userinfo-wp >>> .van-overlay {
  background: #fff;
}
</style>